<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from "echarts";
import { statGoods } from "@/api/stat";

export default {
  data() {
    return {
      amount: [],
      orders: [],
      day: [],
      products: [],
    };
  },
  methods: {
    defaultdata() {
      statGoods().then((res) => {
        console.log(res.data);
        for (let i = 0; i < res.data.data.rows.length; i++) {
          this.day.push(res.data.data.rows[i].day);
          this.amount.push(res.data.data.rows[i].amount);
          this.orders.push(res.data.data.rows[i].orders);
          this.products.push(res.data.data.rows[i].orders);
        }
        // console.log(this.day);
      });
    },
    handleEchar() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单量", "下单货品数量", "下单货品总额"],
        },
        grid: {
          left: "5%",
          right: "5%",
          // bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.day,
        },
        yAxis: {
          type: "value",
          max: 18000,
          interval: 3000,
        },
        series: [
          {
            name: "订单量",
            type: "line",
            stack: "Total",
            data: this.orders,
            smooth: true,
            itemStyle: { color: "green" },
          },
          {
            name: "下单货品数量",
            type: "line",
            // stack: "Total",
            data: this.products,
            smooth: true,
            itemStyle: { color: "skyblue" },
          },
          {
            name: "下单货品总额",
            type: "line",
            // stack: "Total",
            data: this.amount,
            smooth: true,
            itemStyle: { color: "red" },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.defaultdata();
    setInterval(() => {
      this.handleEchar();
    }, 1000);
  },
};
</script>


<style lang="scss" scoped>
#main {
  width: 98%;
  height: 600px;
  margin-top: 50px;
  padding-left: 1%;
  padding-right: 1%;
  margin-top: 6px;
  background-color: #fff;
  padding: 20px;
}
</style>